<template>
  <div class="login">
    <div class="login__content">
      <div class="login-title">
        {{ companyInfo.name !== null && companyInfo.name !== '' ? companyInfo.name : $t('login.index.26f561c845131cf38e90d1e584117750') }}
      </div>

      <login-by-pwd
        v-if="loginType === 'loginPwd'"
        :username.sync="username"
        @toggle="toggleClick"
      />
      <login-by-code
        v-else-if="loginType === 'loginCode'"
        :username.sync="username"
        @toggle="toggleClick"
      />
      <multiple-company
        v-else-if="loginType === 'multiple'"
        :list="companyList"
        :login-params="loginParams"
        @toggle="toggleClick"
      />
      <forget-pwd
        v-else-if="loginType === 'forgetPwd'"
        :username.sync="username"
        @toggle="toggleClick"
      />

      <!-- <div class="statement">
        <el-button type="text">隐私政策</el-button><span>•</span><el-button type="text">用户声明</el-button>
      </div> -->
    </div>

    <div class="footer">
      <img v-if="companyInfo.logo" :src="companyInfo.logo" class="company-logo">
      <div v-else class="footer-title"><img src="@/assets/img/logo.jpg" class="logo"><span>{{ $t('login.index.c550c2c1f0b33389b75d5141667a6c2b') }}</span></div>
      <div class="footer-des">{{ $t('login.index.3e1075343ade96ca395fb8e1bb74fb2e') }}</div>
    </div>
  </div>
</template>

<script>
import { adminCompanyManagerQueryLogoAPI } from '@/api/adminCompanyManager'

import LoginByPwd from './component/LoginByPwd'
import LoginByCode from './component/LoginByCode'
import MultipleCompany from './component/MultipleCompany'
import ForgetPwd from './component/ForgetPwd'

import Lockr from 'lockr'
const LoginLogoNameCacheKey = 'LoginLogoNameCache'

export default {
  // 登录
  name: 'Login',

  components: {
    LoginByPwd,
    LoginByCode,
    MultipleCompany,
    ForgetPwd
  },

  props: {},

  data() {
    return {
      loginType: 'loginPwd', // loginPwd loginCode foregetPwd multiple
      username: '', // 登录账号
      companyList: [],
      companyInfo: {
        name: '',
        logo: ''
      },
      loginParams: null // 登录参数，多企业二次登录需要
    }
  },

  computed: {},

  watch: {
  },

  created() {
    this.handleLoginCache('get')
    this.getLogoAndName()
  },

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 获取logo 和 名称
     */
    getLogoAndName() {
      adminCompanyManagerQueryLogoAPI({
        domain: window.location.hostname
      }).then(res => {
        const resData = res.data
        if (resData) {
          this.handleLoginCache('set', resData)
        } else {
          if (process.env.VUE_APP_CORRECT_DOMAIN === '1') {
            this.correctDomain()
          }
        }
      }).catch(() => {})
    },

    /**
     * @description: 操作登录缓存
     * @param {*} type get  set
     * @return {*}
     */
    handleLoginCache(type, data) {
      const hostname = window.location.hostname
      if (type === 'get') {
        const logCacheInfo = Lockr.get(LoginLogoNameCacheKey)
        if (logCacheInfo && logCacheInfo[hostname]) {
          const domainData = logCacheInfo[hostname]
          this.companyInfo = {
            name: domainData.companyName,
            logo: domainData.companyLoginLogo
          }
        }
      } else if (type === 'set') {
        const logCacheInfo = Lockr.get(LoginLogoNameCacheKey) || {}
        logCacheInfo[hostname] = data
        Lockr.set(LoginLogoNameCacheKey, logCacheInfo)
        this.companyInfo.logo = data.companyLoginLogo
        this.companyInfo.name = data.companyName
      }
    },

    /**
     * 校准域名
     */
    correctDomain() {
      let hostname = window.location.hostname
      const hostnames = hostname.split('.')
      if (hostnames.length >= 2 && hostnames[0] !== 'www') {
        const index = hostname.indexOf('.')
        if (index > 0) {
          hostname = `www${hostname.substring(index)}`
        }
        window.location.href = window.location.protocol + '//' + hostname + (window.location.port ? ':' + window.location.port : '')
      }
    },

    /**
     * 切换展示内容
     */
    toggleClick(type, data, loginParams) {
      this.loginType = type
      if (type === 'multiple') {
        this.companyList = data
        this.loginParams = loginParams
      } else {
        this.loginParams = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .login {
    background-image: none !important;
  }
}

.login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  background-image: url("./img/left.png"), url("./img/right.png");
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: left bottom, right bottom;
  background-size: 360px, 480px;
  -webkit-box-pack: justify;

  &__content {
    width: 400px;
    margin: 0 auto;
    text-align: center;
  }

  &-title {
    padding: 40px 0;
    font-size: 25px;
    font-weight: bold;
    line-height: 40px;
    color: $--color-primary;
  }

  .footer {
    width: 400px;
    padding: 24px 0;
    margin: 0 auto;
    font-size: 12px;
    color: $--color-text-secondary;
    text-align: center;

    &-title {
      font-size: 28px;
      font-weight: bold;
      color: $--color-text-regular;

      .logo {
        width: 32px;
        margin-right: $--interval-base;
      }

      .logo,
      span {
        vertical-align: middle;
      }
    }

    > .company-logo {
      width: 160px;
    }

    &-des {
      margin-top: 16px;
      font-size: 12px;
      color: $--color-text-secondary;
    }
  }

  .statement {
    margin-top: 24px;
    text-align: center;

    span {
      padding: 0 8px;
    }
  }
}
</style>
